What is background-size CSS?

The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Can a background image be left to its natural size?

The image can be left to its natural size, stretched, or constrained to fit the available space. Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.

What if the background size is contain or cover?

If the background-size is contain or cover: While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.

How do I fill a space not covered by a background image?

Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. The background-size property is specified in one of the following ways: Using the keyword values contain or cover.